<template>
    <div class="containers">
        <div class="canvas" ref="canvas"></div>
        <panel v-if="bpmnModeler" :modeler="bpmnModeler" />
        <Button class="toolbar" @click="saveXML">BPMN</Button>
    </div>
</template>
<script>
const bpmn = `
<?xml version="1.0" encoding="UTF-8"?>
<bpmn2:definitions xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" id="sample-diagram" targetNamespace="http://bpmn.io/schema/bpmn" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd">
  <bpmn2:process id="process1567044459787" name="流程1567044459787">
    <bpmn2:documentation>描述</bpmn2:documentation>
    <bpmn2:startEvent id="StartEvent_08f1cwl" />
  </bpmn2:process>
  <bpmndi:BPMNDiagram id="BPMNDiagram_1">
    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="process1567044459787">
      <bpmndi:BPMNShape id="StartEvent_08f1cwl_di" bpmnElement="StartEvent_08f1cwl">
        <dc:Bounds x="342" y="112" width="36" height="36" />
      </bpmndi:BPMNShape>
    </bpmndi:BPMNPlane>
  </bpmndi:BPMNDiagram>
</bpmn2:definitions>`
import BpmnModeler from 'bpmn-js/lib/Modeler' // bpmn-js 设计器
import Panel from "./panel"; // 属性面板
export default {
    name: 'Bpmn',
    components: {
        Panel
    },
    data() {
        return {
            bpmnModeler: null
        }
    },
    mounted() {
        const canvas = this.$refs.canvas
        // 生成实例
        this.bpmnModeler = new BpmnModeler({
            container: canvas
        })
        this.bpmnModeler.createDiagram() // 新增流程定义
        // this.importXML(bpmn) // 导入流程
    },
    methods: {
        // 新增流程定义
        importXML(bpmn) {
            this.bpmnModeler.importXML(bpmn).then(res => {
                console.log(res.warnings);
            }, (err) => {
                console.log(err.message, err.warnings);
            });
        },
        // 转换为XML,
        saveXML() {
            this.bpmnModeler.saveXML({ format: true }).then(res => {
                console.log(res.xml);
            })
        },
    }
}
</script>
<style lang="less" scoped>
/*左边工具栏以及编辑节点的样式*/
@import "~bpmn-js/dist/assets/diagram-js.css";
@import "~bpmn-js/dist/assets/bpmn-font/css/bpmn.css";
@import "~bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css";
@import "~bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css";
.containers {
    position: absolute;
    background-color: #ffffff;
    width: 100%;
    height: 100%;
    .canvas {
        width: 100%;
        height: 100%;
    }
    .bjs-powered-by {
        display: none;
    }
    .toolbar {
        position: absolute;
        top: 20px;
        right: 350px;
    }
}
</style>